<template>
	<view class="container">
		<view class="list">
			<view class="list-item flex justify-between align-center" v-for="item in list" :key="item.id">
				<view class="flex flex-column">
					<text class="name">{{item.description}}</text>
					<text class="time">{{item.addtime|time}}</text>
				</view>
				<view class="flex flex-column align-end">
					<text class="value">￥{{parseFloat(item.amount).toFixed(2) }}</text>
					<text class="status">{{item.plusminus ? '入账' : '出账'}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				currentPage: 0,
				pageSize: 10,
				isFinish: false
			};
		},
		methods: {
			async requestMoneyDetail() {
				if (this.isFinish) {
					return false
				}
				try {
					let {
						list,
						page: {
							page,
							page_num
						}
					} = await this.$u.api.getMoneyDetailApi({
						coin: "cny",
						page: this.currentPage + 1,
						row: this.pageSize
					})
					if (list.length < this.pageSize) {
						this.isFinish = true
					}
					this.currentPage =parseInt(page) 
					this.list = [...this.list, ...list]
				} catch (e) {
					//TODO handle the exception
				}
			}
		},
		onReachBottom() {
			this.requestMoneyDetail()
		},
		async onLoad() {
			this.requestMoneyDetail()
		}
	}
</script>

<style lang="scss">
.container{
	background-color: #fff;
	height: auto;
	.list{
		.list-item{
			padding: 30rpx;
			border-bottom: 1rpx solid $color-gray;
			.name{
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
			.time{
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #999;
			}
			.value{
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
			.status{
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #999;
			}
		}
	}
}
</style>
